<template>
	<view class="login">
		<!-- <view class="login_top">
			<view class="login_top_left">
				<p>HelLo!</p>
				<p style="margin-top: 50rpx;">欢迎来到惠享生活</p>
			</view>
			<view class="login_top_right">

			</view>
		</view> -->
		<view class="login_bottom">
			<image src="../../static/login/logo.png" mode="widthFix" style="margin-top: -100rpx;"></image>
			<!-- <view class="login_bottom_tab">
				<p v-for="(item,index) in tabList" :key="index"
					:style="tabIndex === index?'border-bottom:5rpx solid #ff3232':''" @click="tabIndex = index">
					{{item}}
				</p>
			</view> -->
			<view class="login_bottom_password" v-if="tabIndex === 0">
				<view class="login_bottom_password_input">
					<image src="@/static/login/user.png" mode=""></image>
					<input class="login_bottom_password_input_text" v-model="uplogin.mobile" placeholder="手机号码"
						type="text" />
				</view>

				<view class="login_bottom_password_input">
					<image src="@/static/login/lock.png" mode=""></image>
					<input class="login_bottom_password_input_text" v-model='uplogin.pwd' :password="showPassword"
						placeholder="请输入密码" type="text" />
					<uni-icons style="padding: 0 30rpx;" size="22" :type="showPassword?'eye-filled':'eye-slash-filled'"
						@click="showPassword = !showPassword"></uni-icons>
				</view>

				<view @click="account_loginFun" class="login_bottom_password_input"
					style="background: linear-gradient(80deg, #F7B733,  #FC4A1A ); 
					border-radius: 50rpx;width: 100%;align-items: center;display: flex;justify-content: center;padding: 0;color: #fff;">
					登录
				</view>
			</view>




			<view class="login_bottom_password" v-if="tabIndex === 1">
				<view class="login_bottom_password_input">
					<image src="@/static/login/user.png" mode=""></image>
					<input class="login_bottom_password_input_text" v-model="uplogin.mobile" placeholder="请输入账号／手机号码"
						type="text" />
				</view>

				<view class="login_bottom_password_input">
					<image src="@/static/login/key.png" mode=""></image>
					<input class="login_bottom_password_input_text" placeholder="请输入验证码" type="text" />
					<view class="login_box_form_register_password_button" @click="verificationTextFun()">
						{{getCode}}
					</view>
				</view>

				<view class="login_bottom_password_input" style="background: linear-gradient(80deg, #FC4A1A, #FC4A1A,  #F7B733);
					width: 100%;align-items: center;display: flex;justify-content: center;padding: 0;color: #fff;">
					登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		verifycode,
		account_login,
		code_loginFun
	} from '@/api/login.js'
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: ['账号登录', '验证码登录'],
				showPassword: true,
				getCode: '获取验证码',
				isdate: true,
				uplogin: {
					mobile: '',
					pwd: ''
				},
			};
		},
		methods: {
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			async verifycodeFun() {
				let up = {
					mobile: this.uplogin.mobile,
					temp: 'code_login'
				}
				let res = await verifycode(up);
			},
			async account_loginFun() {
				if (this.uplogin.mobile === '' || this.uplogin.pwd === '') {
					this.showinteraction('请检查账号密码是否正确');
					return
				}
				let data = await account_login(this.uplogin);
				if (data.status === 1) {
					this.showinteraction('登录成功')
					uni.setStorageSync("openid", data.result.openid);
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}, 2000)
				}



				console.log(data);
			},
			verificationTextFun() {
				if (this.isdate) {
					let verifycode = 59;
					if (this.uplogin.mobile === '') {
						this.showinteraction('请输入手机号')
						return
					} else {
						this.verifycodeFun();
					}
					let a = setInterval(() => {
						if (verifycode > 0) {
							this.verifycodeButton = true;
							this.getCode = `${verifycode}s`;
							this.isdate = false;
							verifycode--;
						} else {
							this.verifycodeButton = false;
							clearInterval(a);
							this.verifycode = 59;
							this.getCode = '重新发送';
							this.isdate = true;
						}
					}, 1000)
				}

			},
		}
	}
</script>

<style lang="less">
	.login {
		width: 100%;
		height: 100vh;
		padding-top: var(--status-bar-height);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		background-image: url('@/static/login/login_back.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 60rpx 0;


		.login_top {
			width: 100%;
			height: 460rpx;
			display: flex;
			padding: 0 20rpx;

			.login_top_left {
				width: 450rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				color: #fff;
				justify-content: start;
				font-size: 50rpx;
				padding: 100rpx 20rpx;
			}

			.login_top_right {
				display: flex;
				height: 100%;
			}
		}

		.login_bottom {
			width: 96%;
			height: 942rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 16rpx 40rpx 10rpx #fff;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 200rpx;
			}

			.login_bottom_tab {
				width: 100%;
				height: 160rpx;
				display: flex;
				justify-content: space-around;
				border-bottom: 1px solid #f5f5f5;
				padding: 0 80rpx;

				p {
					width: 180rpx;
					text-align: center;
					line-height: 160rpx;
					color: #3d3d3d;
				}


			}

			.login_bottom_password {
				width: 100%;
				padding: 20rpx 60rpx;

				.login_bottom_password_input {
					margin: 60rpx 0;
					width: 100%;
					height: 80rpx;
					// background-color: #f5f5f5;
					border-bottom: 2rpx solid #ddd;
					// border-radius: 50rpx;
					display: flex;
					align-items: center;
					padding: 0 0 0 40rpx;
					overflow: hidden;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					.login_bottom_password_input_text {
						flex: 1;
						height: 100%;
						padding: 0 20rpx;
					}

					.login_box_form_register_password_button {
						padding: 20rpx;
						font-size: 26rpx;
						width: 190rpx;
						text-align: center;
						background: linear-gradient(3deg, #ff3232, #ff3232, #ff8719);
						color: #f5f5f5;
					}
				}
			}
		}
	}
</style>